<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <view class="Mall4j component-common-btn">
    <!-- 全选按钮 -->
    <block>
      <view
        v-if="btnConfig.isSelect"
        class="btn-radio"
      >
        <radio
          :checked="isCheckedSel"
          color="#082ba6"
          @tap="selectAll"
        />
        全选
      </view>
    </block>
    <block v-if="!btnConfig.btnList || !btnConfig.btnList.length">
      <button
        class="btn button"
        style="flex: 1;"
        type="default"
        :plain="btnConfig.isPlain"
        hover-class="none"
        @tap="handleBtnClick('')"
      >
        {{ btnConfig.btnText }}
      </button>
    </block>
    <!-- 多个按钮 -->
    <block v-else>
      <button
        v-for="(btnItem, index) in btnConfig.btnList"
        :key="index"
        :class="['btn','button', index === 0 ? 'first' : '']"
        type="default"
        :plain="btnItem.isPlain"
        hover-class="none"
        @tap="handleBtnClick(index + 1)"
      >
        {{ btnItem.btnText }}
      </button>
    </block>
  </view>
</template>

<script setup>
import { watch } from 'vue'

const emit = defineEmits(['handleClickBtn', 'handleClickMoreBtn', 'selectAllBtn'])

const props = defineProps({
  // btnConfig 说明:
  // 当btnList为空时默认为单个按钮
  btnConfig: {
    type: Object,
    default: () => {
      return {
        btnText: '没传按钮数组就默认单个按钮',
        isPlain: false,
        isChecked: false,
        isSelect: false,
        // 两个按钮配置
        btnList: [
        ]
      }
    }
  }
})

const isCheckedSel = ref(false)

watch(() => props.btnConfig, () => {
  isCheckedSel.value = props.btnConfig.isChecked
}, { deep: true })

/**
 * 按钮点击事件
 */
const handleBtnClick = (side) => {
  if (!side && side !== 0) {
    emit('handleClickBtn')
  }
  if (side) {
    emit('handleClickMoreBtn', side)
  }
}

/**
 * 全选点击事件
 */
const selectAll = () => {
  isCheckedSel.value = !isCheckedSel.value
  emit('selectAllBtn', isCheckedSel.value)
}
</script>

<style lang="scss" scoped>
.component-common-btn {
  width: 750rpx;
  display: flex;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  box-sizing: border-box;
  overflow: hidden;
  font-weight: 500;
  .btn {
    flex: 1;
    word-break: keep-all;
    min-width: 27%;
    margin: 0 2%;
    display: flex;
    justify-content: center;
    align-items: center;
    &:first-child {
      margin-right: 20rpx;
    }
  }
  .first {
    background-color: #fff;
    color: #082BA6;
  }
  .btn-radio {
    flex: 1;
    font-size: 30rpx;
    display: flex;
    align-items: center;
  }
}
</style>
